<script>
import { del, fetchList, insert, update } from '@/api/job'
import {
  getCompanyOptionsDict,
  getEducationDict,
  getJobCircleDict,
  getSalaryDict, getSalaryTypeOptionsDict,
  getWorkExperienceDict,
  getWorkTypeDict
} from '@/api/dict'

export default {
  data() {
    return {
      searchContent: '',
      page: 1,
      pageSize: 20,
      pageTotal: 0,
      jobList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      isShow: false,
      jobInfo: {
        jobPk: '',
        jobName: '',
        peopleCount: '',
        educationsFk: '1',
        salaryStartFk: '1',
        salaryEndFk: '',
        tips: '',
        responsibility: '',
        required: '',
        address: '',
        workExperienceFk: '1',
        workTypeFk: '1',
        jobCircleFk: '1',
        receptMail: '',
        demo: '',
        companyFk: '',
        salaryTypeFk: '1'
      },
      educationOptions: [],
      salaryOptions: [],
      workExperienceOptions: [],
      workTypeOptions: [],
      jobCircleOptions: [],
      companyOptions: [],
      formLabelWidth: '100px',
      endSalaryOptions: [],
      salaryTypeOptions: []
    }
  },
  created() {
    this.getEducationOptions()
    this.getSalary()
    this.getWorkExperience()
    this.getWorkType()
    this.getJobCircle()
    this.getCompanyOptions()
    this.getSalaryTypeOptions()
  },
  mounted() {
    this.getData()
  },
  methods: {
    created() {
      this.resetFormData()
      this.isShow = true
    },
    resetFormData() {
      this.jobInfo = {
        jobPk: '',
        jobName: '',
        peopleCount: '',
        educationsFk: '1',
        salaryStartFk: '1',
        salaryEndFk: '',
        tips: '',
        responsibility: '',
        required: '',
        address: '',
        workExperienceFk: '1',
        workTypeFk: '1',
        jobCircleFk: '1',
        receptMail: '',
        demo: '',
        companyFk: '',
        salaryTypeFk: '1'
      }
      this.endSalaryOptions = []
    },

    handlePictureCardPreviewImg(url) {
      this.dialogImageUrl = url
      this.dialogVisible = true
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    getData() {
      fetchList(this.page, this.pageSize, this.searchContent)
        .then(res => {
          console.log(res)
          const msg = res.message
          msg.list.forEach(el => {
            el.companyInfo = JSON.parse(el.companyInfo)
            el.tip = el.tips.includes(',') ? el.tips.split(',') : el.tips.split('，')
          })
          this.jobList = msg.list
          this.pageTotal = msg.total
        })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
    },
    reset() {
      this.searchContent = ''
      this.page = 1
      this.pageSize = 20
      this.pageTotal = 0
      this.getData()
    },
    delData(row) {
      this.$confirm('此操作将永久移除该职位以及相关投递信息等, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(row.jobPk)
          .then(res => {
            // console.log(res)
            if (res.success) {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.getData()
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getEducationOptions() {
      getEducationDict()
        .then(res => {
          // console.log(res)
          this.educationOptions = res.message
        })
    },
    getJobCircle() {
      getJobCircleDict()
        .then(res => {
          // console.log(res)
          this.jobCircleOptions = res.message
        })
    },
    getWorkExperience() {
      getWorkExperienceDict()
        .then(res => {
          // console.log(res)
          this.workExperienceOptions = res.message
        })
    },
    getWorkType() {
      getWorkTypeDict()
        .then(res => {
          // console.log(res)
          this.workTypeOptions = res.message
        })
    },
    getSalary() {
      getSalaryDict()
        .then(res => {
          // console.log(res)
          this.salaryOptions = res.message
        })
    },
    getCompanyOptions() {
      getCompanyOptionsDict()
        .then(res => {
          // console.log(res)
          this.companyOptions = res.message
        })
    },
    getSalaryTypeOptions() {
      getSalaryTypeOptionsDict()
        .then(res => {
          // console.log(res)
          this.salaryTypeOptions = res.message
        })
    },
    submitInfo() {
      // 进行提交
      let data = null
      data = { ...this.jobInfo }
      data.educationsFk = data.educationsFk !== '' ? parseInt(data.educationsFk) : ''
      data.salaryStartFk = data.salaryStartFk !== '' ? parseInt(data.salaryStartFk) : ''
      data.salaryEndFk = data.salaryEndFk !== '' ? parseInt(data.salaryEndFk) : ''
      data.jobCircleFk = data.jobCircleFk !== '' ? parseInt(data.jobCircleFk) : ''
      data.workExperienceFk = data.workExperienceFk !== '' ? parseInt(data.workExperienceFk) : ''
      data.workTypeFk = data.workTypeFk !== '' ? parseInt(data.workTypeFk) : ''
      data.salaryTypeFk = data.salaryTypeFk !== '' ? parseInt(data.salaryTypeFk) : ''
      console.log(data)
      if (this.jobInfo.jobPk === '') {
        // 这里进行新增
        insert(data)
          .then(res => {
            console.log(res)
            if (res.success) {
              this.$message({
                type: 'success',
                message: '岗位新增成功'
              })
              this.getData()
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          })
      } else {
        // 这里进行更新
        update(data)
          .then(res => {
            console.log(res)
            if (res.success) {
              this.$message({
                type: 'success',
                message: '岗位更新成功'
              })
              this.getData()
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          })
      }
      this.isShow = false
    },
    editData(row) {
      let data = null
      data = { ...row }
      console.log(data)
      this.resetFormData()
      this.endSalaryOptions = this.salaryOptions
      data.companyFk = `${row.companyInfo.companyPk}`
      data.jobCircleFk = `${row.jobCircleFk}`
      data.salaryStartFk = `${row.salaryStartFk}`
      data.salaryEndFk = `${row.salaryEndFk}`
      data.salaryTypeFk = `${row.salaryTypeFk}`
      data.workExperienceFk = `${row.workExperienceFk}`
      data.workTypeFk = `${row.workTypeFk}`
      data.educationsFk = `${row.educationsFk}`
      this.jobInfo = data
      this.isShow = true
    },
    // 这里进行终止薪资的列表获取
    startSalaryChange(val) {
      console.log(val)
      const salaryOptions = this.salaryOptions
      this.jobInfo.salaryEndFk = ''
      for (let i = 0; i < salaryOptions.length; i++) {
        if (salaryOptions[i].value === val) {
          this.endSalaryOptions = salaryOptions.filter((_, index) => index >= i && index <= salaryOptions.length)
        }
      }
    }
  }
}
</script>

<template>
  <div>
    <el-dialog :visible.sync="dialogVisible">
      <img :src="dialogImageUrl" alt="" width="100%">
    </el-dialog>
    <el-dialog :visible.sync="isShow" title="职位信息">
      <el-form :model="jobInfo">
        <el-form-item :label-width="formLabelWidth" label="职位名称">
          <el-input v-model="jobInfo.jobName" autocomplete="off" placeholder="请输入职位名称"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="招聘人数">
          <el-input v-model="jobInfo.peopleCount" placeholder="请输入招聘人数" />
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="岗位职责">
          <el-input v-model="jobInfo.responsibility" autocomplete="off" placeholder="请输入岗位职责"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="任职要求">
          <el-input v-model="jobInfo.required" autocomplete="off" placeholder="请输入任职要求" type="textarea"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="其他">
          <el-input v-model="jobInfo.demo" autocomplete="off" placeholder="其他" type="textarea"/>
        </el-form-item>

        <el-row>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="归属公司">
              <el-select v-model="jobInfo.companyFk" filterable placeholder="请选择归属公司">
                <el-option
                  v-for="item in companyOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="圈子分类">
              <el-select v-model="jobInfo.jobCircleFk" filterable placeholder="请选择岗位圈子分类">
                <el-option
                  v-for="item in jobCircleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="学历要求">
              <el-select v-model="jobInfo.educationsFk" filterable placeholder="请选择学历要求">
                <el-option
                  v-for="item in educationOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="岗位类型">
              <el-select
                v-model="jobInfo.workTypeFk"
                filterable
                placeholder="请选择岗位类型"
              >
                <el-option
                  v-for="item in workTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="工作经验">
              <el-select
                v-model="jobInfo.workExperienceFk"
                filterable
                placeholder="请选择岗位类型"
              >
                <el-option
                  v-for="item in workExperienceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="薪资构成">
              <el-select
                v-model="jobInfo.salaryTypeFk"
                filterable
                placeholder="请选择薪资构成"
              >
                <el-option
                  v-for="item in salaryTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="起始薪资">
              <el-select v-model="jobInfo.salaryStartFk" placeholder="请选择薪资-起始薪资" @change="startSalaryChange">
                <el-option v-for="item in salaryOptions" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="12" :xs="24">
            <el-form-item :label-width="formLabelWidth" label="终止薪资">
              <el-select v-model="jobInfo.salaryEndFk" placeholder="请选择薪资-终止薪资">
                <el-option v-for="item in endSalaryOptions" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item :label-width="formLabelWidth" label="职位标签">
          <el-input v-model="jobInfo.tips" autocomplete="off" placeholder="请输入职位标签(,分割)" type="textarea"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="工作地址">
          <el-input v-model="jobInfo.address" autocomplete="off" placeholder="请输入工作地址" type="textarea"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="接收邮箱">
          <el-input v-model="jobInfo.receptMail" autocomplete="off" placeholder="请输入接收邮箱" type="email"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="submitInfo">确 定</el-button>
      </div>
    </el-dialog>
    <div class="d-flex ai-center jc-end">
      <el-input
        v-model="searchContent"
        placeholder="请输入职位名称"
        prefix-icon="el-icon-search"
        style="max-width: 220px;margin-right: 10px;"
      />
      <el-button type="primary" @click="getData">搜索</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
      <el-button type="primary" @click="created">新增</el-button>
    </div>

    <el-table :data="jobList" height="75vh" style="width: 100%;margin-top: 20px">
      <el-table-column type="index" width="50"/>
      <el-table-column label="职位名称" prop="jobName" width="180"/>
      <el-table-column label="工作圈子" prop="jobCircle" width="100"/>
      <el-table-column label="地址" prop="address" width="180"/>
      <el-table-column label="公司" prop="jobInfo.name" width="180"/>
      <el-table-column label="招聘人数" prop="peopleCount" width="80"/>
      <el-table-column label="薪资构成" prop="salaryType" width="180"/>
      <el-table-column label="工作类型" prop="workType" width="80"/>
      <el-table-column label="工作经验" prop="workExperience" width="80"/>
      <el-table-column label="学历" prop="education" width="80"/>
      <!--      <el-table-column label="岗位要求" prop="required" width="380" />-->
      <!--      <el-table-column label="岗位职责" prop="responsibility" width="380" />-->
      <el-table-column label="薪资" width="120">
        <template slot-scope="scope">
          <div>
            {{ scope.row.salaryStart }}-{{ scope.row.salaryEnd }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="职位标签" width="240">
        <template slot-scope="scope">
          <div class="d-flex flex-wrap">
            <el-tag
              v-for="(item,index) in scope.row.tip"
              :key="index"
              effect="plain"
              type="info"
            >
              {{ item }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <div class="d-flex flex-wrap">
            <el-button type="primary" @click="editData(scope.row)">编辑</el-button>
            <el-button type="danger" @click="delData(scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="d-flex jc-end">
      <el-pagination
        :current-page="page"
        :page-size="pageSize"
        :page-sizes="[20, 50, 100, 200]"
        :total="pageTotal"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>

</style>
